﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="referrer" content="origin" />
    <title>联系我们</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <link rel="Bookmark nofollow" href="img/favicon.ico">
    <link rel="Shortcut Icon nofollow" href="img/favicon.ico">
    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: #670d10;
        }

        .main_content {
            height: 100%;
            background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
        }

        .switch_button {
            line-height: 36px;
            height: 36px;
            width: 140px;
            color: #b5c7b7;
            font-size: 16px;
            font-weight: normal;
            font-family: Arial;
            border: 1px solid #80ff2c;
            -webkit-border-top-left-radius: 6px;
            -moz-border-radius-topleft: 6px;
            border-top-left-radius: 6px;
            -webkit-border-top-right-radius: 6px;
            -moz-border-radius-topright: 6px;
            border-top-right-radius: 6px;
            -webkit-border-bottom-left-radius: 6px;
            -moz-border-radius-bottomleft: 6px;
            border-bottom-left-radius: 6px;
            -webkit-border-bottom-right-radius: 6px;
            -moz-border-radius-bottomright: 6px;
            border-bottom-right-radius: 6px;
            text-align: center;
            display: inline-block;
            text-decoration: none;
        }

            .switch_button:hover {
                background-color: #f5f5f5;
            }
    </style>
    <script>
        function hideDiv1() {
            //以下两个语句,用visibility即使隐藏也占渲染位置,用display相当于将这个div彻底抹掉
            document.getElementById("div1").style.display = "block";
            document.getElementById("div2").style.display = "none";
        }
        function hideDiv2() {
            document.getElementById("div1").style.display = "none";
            document.getElementById("div2").style.display = "block";
        }

    </script>
</head>
<body>
    <div class="main_content">
        <div style="max-width:300px;margin:0 auto;padding-top:3%;text-align:center;">
            <a style="color:#f5f5f5;text-decoration:none;" href="http://wpa.qq.com/msgrd?v=3&amp;uin=391502069&amp;site=qq&amp;menu=yes" rel="nofollow" target="_blank" title="戳我在线咨询QQ:391502069">戳我在线咨询</a>
        </div>
        <div style="max-width:300px;margin:0 auto;margin-top:20px;">
            <div style="text-align:center;margin-bottom:5px;">                
                <div onclick="hideDiv2()" class="switch_button">
                    支付宝
                </div>
                <div onclick="hideDiv1()" class="switch_button">
                    微信
                </div>
            </div>
            <div id="div1" style="display:none;">
                <img src="img/webchat.jpg" width="300" />
            </div>
            <div id="div2" style="display:block;">
                <img src="img/alipay.jpg" width="300" />
            </div>
        </div>
    </div>

</body>
</html>